<template>
    <div id="left-charts">
      <TimeCarCount v-if="home_state==='history_hotMap'"/>
      <OnlineChart v-if="home_state==='realtime'|| home_state==='company_group'|| home_state==='alarm_info'"/>
      <CarType v-if="home_state ==='realtime'"/>
      <WarnChart v-if="home_state!=='history_hotMap'"/>
      <EnergyChart v-if="home_state==='realtime' || home_state==='alarm_info'"/>
    </div>
</template>

<script>
  import {mapGetters, mapMutations} from 'vuex'
  import CarType from '../sub-home/carType.vue'
  import EnergyChart from '../sub-home/energyChart.vue'
  import OnlineChart from '../sub-home/onlineChart.vue'
  import WarnChart from '../sub-home/warnChart.vue'
  import TimeCarCount from '../sub-home/timeCarCount'
  import CarActiveChart from '../sub-home/carActiveChart'
    export default {
        name: 'LeftCharts',
        data () {
            return {
                msg: 'Welcome to Your Vue.js App'
            }
        },
        mounted(){

        },
      computed:{
        ...mapGetters(['home_state']),
      },
      components: {
        CarType,
        EnergyChart,
        OnlineChart,
        WarnChart,
        TimeCarCount,
        CarActiveChart,
      },
    }
</script>

<style lang="scss" scoped>
  @import "../../../static/common/common.scss";
    #left-charts {
      position: absolute;
      top: 0;
      left: 0px;
      width: 460px;
      /*height: 100%;*/
      pointer-events: auto;
    }
</style>
